<template>
  <div class="container bg-white">
    <blank
      :value="showEmpty"
      :title="empty.title"
      :subtitle="empty.subtitle"
      :message="empty.message"
      :icon="empty.icon"
    >
      <template
        #button
        v-if="qrcode"
      >
        <van-button
          type="warning"
          round
          plain
          @click="downloadCodeImg"
        >保存图片</van-button>
      </template>
    </blank>
  </div>
</template>

<script>
import Blank from '@/components/abnor/blank'
import {
  Row,
  Col,
  Icon,
  Image,
  Loading,
  Swipe,
  SwipeItem,
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Button
} from 'vant'

export default {
  components: {
    [Image.name]: Image,
    [Loading.name]: Loading,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    Blank
  },
  data () {
    return {
      showEmpty: true,
      qrcode: '',
      empty: {
        title: '',
        subtitle: '优越定制客服',
        message: '长按图片识别二维码添加客服微信，或者点击保存下载图片后识别',
        icon: '/static/images/logo.png'
      }
    }
  },
  created () {
    console.log(this.$store.state.backRoute)
    let errorMsg = this.$route.query.error
    if (typeof errorMsg === 'string' && errorMsg) {
      this.empty.subtitle = errorMsg
    }
    this.$http.shop.getService().then(res => {
      console.log(res)
      const { data } = res
      // this.avatar = data.avatar
      this.qrcode = data.qrcode
      this.empty.icon = data.qrcode
      this.empty.title = data.name
      console.log(this.qrcode)
    })
  },
  methods: {
    downloadCodeImg () {
      if (this.qrcode) {
        console.log('下载图片')
        var a = document.createElement('a')
        a.download = name || 'pic'
        // 设置图片地址
        a.href = this.qrcode
        a.click()
      }
    }
  }
}
</script>
